<template>
    <div id="CommonInfo">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <template v-for="(item,index) in list">
            <div class="infoF flex jCenter">
                <div class="info">
                    <div class="name">{{item.name}}</div>
                    <div class="flex between">
                        <div class="call">联系方式:{{item.telephone | noneNum}}</div>
                        <div class="flex">
                            <div class="btn marR" @click="edit(item.id)"><img src="../../assets/img/editIcon.png"/></div>
                            <div class="btn" @click="del(item.id,index)"><img src="../../assets/img/delIcon.png"/></div>
                        </div>
                    </div>
                    <div class="idCard">身份证:{{item.idcard | noneId}}</div>
                </div>
            </div>
        </template>
        <div class="btnB">
            <div style="margin: 12px;">
                <van-button block color="#0fa0a0" to="/addPassenger" style="font-size: 18px;border-radius: 10px">
                    <div class="">
                        <span style="font-size: 24px;margin-right: 7px">+</span>
                        <span>新增客户</span>
                    </div>
                </van-button>
            </div>
        </div>
        <Loading :isLoading="isLoading"/>
    </div>
</template>

<script>
    import Loading from 'components/Loading.vue'
    import NavBarTitle from 'components/NavBarTitle.vue'
    export default {
        data() {
            return {
                NavBarTitle:'常用信息',
                isLoading: true,
                list: [],
            }
        },
        filters:{
            noneNum(val){
                var reg = /^(\d{3})\d{4}(\d{4})$/;
                return val.replace(reg, "$1****$2");
            },
            noneId(val){
                return `${val.substring(0,4)}**********${val.substring(val.length-3)}`
            }
        },
        components: {
            NavBarTitle,
            Loading
        },
        methods: {
            edit(id){
                this.$router.push({path:'/editPassenger',query:{id:id}})
            },
            del(id,index){
                let data = {
                    token: this.$store.state.token,
                    id: id
                };
                this.$axios.post(this.$index+this.$api.user.delcontacts,this.$Qs.stringify(data))
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            this.list.some((item,i)=>{
                                if(i == index){
                                    this.list.splice(i,1);
                                    return true
                                }
                            });
                            this.$toast.success(res.data.msg);
                        }else {
                            this.$toast(res.data.msg)
                        }
                    }).catch((err) => {
                    console.log(err);
                })
            }
        },
        beforeMount() {

        },
        created(){
            let data = {
                token: this.$store.state.token,
                id: 0
            };
            this.$axios.post(this.$index+this.$api.user.contacts,this.$Qs.stringify(data))
                .then((res) => {
                    console.log(res);
                    if(res.data.flag){
                        this.list = res.data.data;
                        this.isLoading = false;
                    }else {
                        this.$toast(res.data.msg)
                    }
                }).catch((err) => {
                console.log(err);
            })
        }
    }
</script>

<style scoped>
    .infoF{
        width: 100%;
        height: 111.5px;
    }
    .info{
        width: 93.6%;
        background-color: #ffffff;
        box-shadow: 3px 5px 21px rgba(0,0,0,.05);
        margin-bottom: 10px;
    }
    .info>div{
        padding: 9px 18px 0 18px;
        height: 20px;
    }
    .info img{
        width: 20px;
        height: 20px;
    }
    .name{
        font-size: 17px;
        color: #333333;
        margin-bottom: 8px;
    }
    .call ,.idCard{
        font-size: 14px;
        color: #888888;
    }
    .marR{
        margin-right: 39px;
    }
    .btnB{
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 36px;
        height: 47px;
        z-index: 1;
    }
    /deep/ .van-icon{
        margin-top: 3px;
    }
</style>